<template>
    <div class="project-manual">
        <div style=" background: #edecf5;">
            <div class="manual-ul-list" v-for="(item,key) of dataList" :key="key">
                <div class="manual-item">
                    <div class="manual-item-header">
                        <h3 class="manual-item-title">{{item.TrainInfo.TrainingName}}</h3>
                        <p class="manual-item-institutions">{{item.TrainInfo.OrgName}}</p>
                    </div>
                    <div class="manual-item-info" v-for="(i,k) of item.ManualList" :key=k @click="goNextPage(i)">
                        <div class="info-title">{{i.Title}}</div>
                        <p>{{i.CreateTime}}</p>
                    </div>
                </div>
            </div>
        </div>
        <p style="text-align: center;margin-top:40rpx;" v-if="moreText">下拉加载更多</p>
        <p style="text-align: center;margin-top:40rpx;" v-if="noMoreText">没有更多数据了</p>
        <div class="no-data-wrap" v-if="showNoData">
            <img src="../../../static/tabs/noData.png" alt="">
        </div>
        <van-toast id="van-toast" />
    </div>
</template>
<script>
    import { QXTrainingManualList } from '@/providers/service'

    export default {
        data() {
            return {
                dataList: [
                    {
                        TrainInfo: {},
                        ManualList: []
                    }
                ],
                userInfo: {},
                PageSize: 10,
                PageIndex: 0,
                loadMoreBool: true,
                showNoData:false,
                moreText:false,
                noMoreText:false
            }
        },
        // 上拉加载
        onReachBottom() {
            if(!this.moreText){ return false}
            this.getData();
        },
        onPullDownRefresh() {
            this.PageIndex = 0;
            this.dataList = []
            this.moreText = false
            this.noMoreText = false
            this.getData();
            wx.stopPullDownRefresh()
            this.$toast('刷新成功')
        },
        methods: {
            goNextPage(item) {
                this.$router.push({ path: '/pages/project/projectManualDetail', query: { ID: item.ID, TID: item.TID } })
            },
            async getData() {
                let { TID, type } = this.$route.query;
                try {
                    this.userInfo = wx.getStorageSync('userInfo')
                    let { RoleCode, UserID } = this.userInfo
                    let res = await QXTrainingManualList({
                        TID,
                        UserID,
                        PageSize: this.PageSize,
                        PageIndex: this.PageIndex,
                    })
                    let _list = res && res.length ? res : []
                    //NoData
                    if (!_list.length) {
                        if(this.PageIndex===0){
                            this.showNoData = true
                        }else{
                            this.noMoreText = true
                            this.moreText = false
                        }
                    }else{
                        this.noMoreText = _list.length < 10 ?true:false
                        this.moreText = !this.noMoreText
                        this.PageIndex = this.PageIndex + 1;
                        this.dataList = [...this.dataList, ..._list]
                    }

                } catch (error) {
                    console.log(error)
                }
            }
        },
        onShow() {
            this.PageIndex = 0;
            this.moreText = false
            this.noMoreText = false
            this.dataList = [];
            this.getData();
        },
        onUnload(){
            this.showNoData = false
        }
    }
</script>
<style>
    page {
        height: 100%;
        width: 100%;
        background: #ffffff;
    }
</style>
<style scoped lang="less">
    .no-data-wrap {
        text-align: center;
        transform: translateY(30%);
    }

    .project-manual {
        position: relative;
        margin: 40rpx 30rpx;
        /* background: #edecf5; */
        border-radius: 8rpx;

        .manual-ul-list {
            position: relative;

            .manual-item {
                /* padding: 35rpx 0; */
                /* border-bottom: 1rpx solid #e0e0e3; */
                position: relative;

                .manual-item-header {
                    border-bottom: 1rpx solid #e0e0e3;
                    padding: 35rpx 40rpx 20rpx;

                    .manual-item-title {
                        font-size: 32rpx;
                        line-height: 40rpx;
                    }

                    .manual-item-institutions {
                        font-size: 24rpx;
                        color: #bbbbc0;
                    }
                }

                .manual-item-info {
                    padding: 22rpx 40rpx;
                    border-bottom: 1rpx solid #e0e0e3;

                    .info-title {
                        font-size: 30rpx;
                        color: #9d9c9f;
                    }

                    p {
                        font-size: 22rpx;
                        color: #bbbbc0;
                    }
                }
            }
        }
    }
</style>
